<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>已注册人脸照片</title>
    <link rel="stylesheet" href="/css/uploadimage.css">
    <link rel="stylesheet" href="/css/bootstrap.css">
</head>

<body>
    <div id="app">
        <div class="imagelist">
            <div class="imageitem" v-for="face,index in faces">
                <img v-bind:src="getFace(face.file)">
                <span>
                    <img src="/images/close.png" alt="" @click="showConfirm(index)">
                </span>
            </div>
        </div>
        <div id="modal" class="myModal" v-if="uploading || deleting || confirm || showAlert">
            <div class="modalcontent">
                <div class="modalbody">
                    <div v-if="showAlert">
                        <div>{{alertMsg}}</div>
                        <div>
                            <button class="btn btn-link" @click="showAlert=false">确定</button>
                        </div>
                    </div>
                    <div v-if="confirm">
                        <div style="font-size: 18px;text-align: left;">确认删除 ？</div>
                        <div style="text-align: right">
                            <button class="btn btn-link" @click="showModal=false;confirm=false">取消</button> <button class="btn btn-link" @click="deleteImage">确认</button>
                        </div>
                    </div>
                    <div v-if="deleting || uploading">
                        <p id="modalp" v-if="deleting">删除中...</p>
                        <p id="modalp" v-if="uploading">注册中...</p>
                        <img src="/images/loading.png" alt="">
                    </div>
                </div>

            </div>
        </div>
        <div class="upload">
            <div>
                <button class="btn" @click="choseImage">上传新的人脸照片</button>
            </div>
            <div class="tips">拍照时请使用正脸, 人脸区域占整个图像框的30-50%</div>
        </div>
    </div>

</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>
<script src="/js/userFaces.js"></script>

</html>